<template>
	<view class="content">
		<view class="top_box">
			<!-- 已登录用户信息 -->
			<view class="user_box" v-if="log_state">
				<view class="user_msg">
					<img src="../../static/image/home_icon_photo.png" alt="" class="user_avatar">
					<text>{{home.username}}</text>
				</view>
				<text class="log_out_btn" @click="logout">退出登录</text>
			</view>
			<!-- 未登录用户信息 -->
			<view class="user_box" v-show="!log_state">
				<view class="user_msg">
					<img src="../../static/image/home_icon_photo.png" alt="" class="user_avatar">
					<view class="user_name">请登录您的大客户账户</view>
				</view>
				<view class="login_btn" @click="go_login">点击登录</view>
			</view>
			<!-- 面单数据 -->
			<view class="num_box">
				<view class="msg_box">
					<view class="num_title_box">
						<view>待打印面单</view>
						<view>今日已打印面单</view>
						<view>今日创建面单</view>
					</view>
					<view class="num_count_box">
						<view>{{home.wait_print_count}}</view>
						<view>{{home.printed_count}}</view>
						<view>{{home.today_order_count}}</view>
					</view>
				</view>
				<view class="msg_box">
					<view class="num_title_box">
						<view>待打印批次</view>
						<view>今日已打印批次</view>
						<view>今日创建批次</view>
					</view>
					<view class="num_count_box">
						<view>{{home.wait_print_batch_count}}</view>
						<view>{{home.printed_batch_count}}</view>
						<view>{{home.today_batch_count}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 跳转 -->
		<view class="operation_box">
			<img src="../../static/image/home_icon_creat@2x.png" @click="go_add_order" alt="">
			<img src="../../static/image/home_icon_print@2x.png" @click="go_print_order" alt="">
		</view>
		<!-- 打印设备管理 -->
		<view class="print_device_box">
			<!-- 打印设备 -->
			<view class="print_box_title">
				<img src="../../static/image/home_icon_dayin@2x.png" alt="">
				<view>打印设备</view>
			</view>
			<view class="history_print" v-if="log_state && home.printer">
				<view class="history_name">{{home.printer.name}}</view>
				<img src="../../static/image/home_icon_delete@2x.png" alt="" @click="delete_device">
			</view>
			<view class="add_print_device" @click="add_print_device">+添加/管理打印机</view>
			<view class="tips">请打开蓝牙和位置信息，并允许微信访问位置信息</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				log_state: false,
				home: {
					wait_print_count:0,
					printed_count:0,
					today_order_count:0,
					wait_print_batch_count:0,
					printed_batch_count:0,
					today_batch_count:0,
					printer: {
						name: ''
					}
				},
			}
		},
		onShow() {
			uni.getStorage({
				key: 'deviceId',
				success: res => {
					uni.removeStorage({
						key: 'deviceId'
					})
					uni.removeStorage({
						key: 'device_data'
					})
				}
			})
			// 登录
			uni.getStorage({
				key: 'token',
				success: res => {
					this.token = res.data
					this.log_state = true
					this.home_data(res.data)
				},
				fail: err => {
					uni.login({
						provider:'weixin',
						success: res => {
							if (res.code){
								// 传code
								this.$https.get(`api/mini_customer/v1/customers/certificate_login?code=${res.code}`)
								.then(res => {
									if (res.data.token) {
										this.log_state = true
										this.token = res.data.token
										uni.setStorage({
											key: 'token',
											data: res.data.token
										})
										this.home_data(res.data.token)
									} else {
										uni.setStorage({
											key: 'login_data',
											data: res.data
										})
									}
								})	
							}
						}
					})
				}
			})
		},
		methods: {
			// 删除设备
			delete_device () {
				if (this.home.printer.uuid) {
					this.$https.delete(`api/mini_customer/v1/bluetooth_devices/delete?uuid=${this.home.printer.uuid}&token=${this.token}`)
					.then(res => {
						this.home_data(this.token)
					})
				}
				
			},
			// 去添加管理打印机
			add_print_device () {
				uni.navigateTo({
					url: '../addDevice/addDevice'
				})
			},
			// 去创建面单
			go_add_order() {
				if (this.token) {
					uni.switchTab({
						url: '../addOrder/addOrder',
						success: e => {
							// switch页面跳转后不刷新 手动onload
							var page = getCurrentPages().pop();
							if (page == undefined || page == null) return;
							page.onLoad();
						}
					})
				} else {
					uni.redirectTo({
						url: '../login/login'
					})
				}
			},
			go_print_order () {
				if (this.token) {
					uni.switchTab({
						url: '../orderList/orderList',
						success: e => {
							// switch页面跳转后不刷新 手动onload
							var page = getCurrentPages().pop();
							if (page == undefined || page == null) return;
							page.onLoad();
						}
					})
				} else {
					uni.redirectTo({
						url: '../login/login'
					})
				}
			},
			// 调取首页信息
			home_data (token) {
				this.$https.get(`api/mini_customer/v1/base/home?token=${token}`)
				.then(resq => {
					if (resq) {
						this.home = resq.data
						if (resq.data.printer) {
							uni.setStorage({
								key: 'last_device_id',
								data: resq.data.printer.device_id
							})
							uni.setStorage({
								key: 'last_device_name',
								data: resq.data.printer.name
							})
						}
					}
					
				})
			},
			// 点击跳转登录页
			go_login () {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			// 退出登录
			logout(){
				this.$https.delete(`api/mini_customer/v1/customers/logout?token=${this.token}`)
				.then(res => {
					// 退出登录成功 刷新页面 删除token
					this.log_state = false;
					uni.removeStorage({
						key: 'token',
						success: res => {
							// 退出登录后手动页面onload
							let page = getCurrentPages().pop();
							page.onLoad()
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					})
				})
			}
		}
	}
</script>

<style>
	.content {
		height: 100%;
		width: 100%;
		overflow-x: hidden;
	}
	.top_box{
		width: 100%;
		height: 556rpx;
		background-image: linear-gradient(135deg, #3BB0C3 0%, #13A684 100%);
		padding-top: 48rpx;
	}
	.user_box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		box-shadow: 4rpx 8rpx 20rpx 0 #0D7B62;
		border-radius: 12rpx;
		margin-left: 24rpx;
		width: 702rpx;
		height: 120rpx;
	}
	.user_msg{
		display: flex;
		align-items: center;
	}
	.user_avatar{
		width: 72rpx;
		height: 72rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
	}
	.user_name{
		font-size: 28rpx;
		color: #999999;
	}
	.login_btn{
		width: 170rpx;
		height: 72rpx;
		border-radius: 6rpx;
		text-align: center;
		line-height: 72rpx;
		color: white;
		background-color: #14A785;
		font-size: 28rpx;
		margin-right: 24rpx;
	}
	.log_out_btn{
		color: #FF4343;
		font-size: 28rpx;
		text-decoration: underline;
		margin-right: 24rpx;
	}
	.num_box{
		margin-top: 48rpx;
	}
	.msg_box view{
		display: flex;
		color:  white;
	}
	.num_title_box,.num_count_box{
		width: calc(100% - 28rpx);
		margin-left: 14rpx;
		margin-bottom: 24rpx;
	}
	.num_title_box view{
		width: calc(((100% - 8rpx) / 3) + 4rpx);
		text-align: center;
		display: flex;
		justify-content: center;
		font-size: 24rpx;
	}
	.num_count_box view{
		width: calc((100% - 8rpx) / 3);
		text-align: center;
		display: flex;
		justify-content: center;
		font-size: 80rpx;
		border-right: 4rpx solid #90d4cd;
	}
	.num_num_title_box view:nth-last-of-type(1){
		width: calc((100% - 8rpx) / 3);
	}
	.num_count_box view:nth-last-of-type(1){
		border: none;
	}
	.operation_box{
		display: flex;
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-top: 24rpx;
		justify-content: space-between;
	}
	.operation_box img{
		width: 340rpx;
		height: 200rpx;
	}
	.print_device_box{
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		margin-top: 24rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		padding-top: 24rpx;
		margin-bottom: 24rpx;
	}
	.print_box_title{
		display: flex;
		align-items: center;
	}
	.print_box_title img{
		width: 40rpx;
		height:40rpx;
		margin-left: 24rpx;
	}
	.print_box_title view{
		margin-left: 12rpx;
		font-size: 28rpx;
		color: #333333;
	}
	.history_print{
		width: calc(100% - 48rpx - 8rpx - 24rpx);
		margin-left: 24rpx;
		margin-top: 24rpx;
		font-size: 24rpx;
		color: #13A684;
		background-color: #D1E0DA;
		line-height: 100rpx;
		border: 4rpx solid #D1E0DA;
		padding-left: 24rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.history_print img{
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
	}
	.add_print_device{
		width: calc(100% - 48rpx - 8rpx - 24rpx);
		margin-left: 24rpx;
		margin-top: 24rpx;
		font-size: 24rpx;
		color: #13A684;
		line-height: 100rpx;
		border: 4rpx solid #D1E0DA;
		padding-left: 24rpx;
		border-radius: 12rpx;
	}
	.tips{
		margin-top: 24rpx;
		margin-left: 24rpx;
		font-size: 24rpx;
		color: #999999;
		padding-bottom: 24rpx;
	}
</style>
